<template>
  <div>
    <div id="myChartGauge"></div>
    <div id="myChartPictorialBar"></div>
    <div id="myChart"></div>
  </div>
</template>

<script>
// 引入中国地图数据
export default {
  data() {
    return {}
  },
  // 加载完DOM后才执行的mouted
  mounted() {
    // 1. 初始化Echarts实例
    const myChart = this.$echarts.init(document.getElementById('myChart'))
    var builderJson = {
      all: 10887,
      charts: {
        map: 3237,
        lines: 2164,
        bar: 7561,
        line: 7778,
        pie: 7355,
        scatter: 2405,
        candlestick: 1842,
        radar: 2090,
        heatmap: 1762,
        treemap: 1593,
        graph: 2060,
        boxplot: 1537,
        parallel: 1908,
        gauge: 2107,
        funnel: 1692,
        sankey: 1568
      },
      components: {
        geo: 2788,
        title: 9575,
        legend: 9400,
        tooltip: 9466,
        grid: 9266,
        markPoint: 3419,
        markLine: 2984,
        timeline: 2739,
        dataZoom: 2744,
        visualMap: 2466,
        toolbox: 3034,
        polar: 1945
      },
      ie: 9743
    }

    var downloadJson = {
      'echarts.min.js': 17365,
      'echarts.simple.min.js': 4079,
      'echarts.common.min.js': 6929,
      'echarts.js': 14890
    }

    var themeJson = {
      'dark.js': 1594,
      'infographic.js': 925,
      'shine.js': 1608,
      'roma.js': 721,
      'macarons.js': 2179,
      'vintage.js': 1982
    }

    var waterMarkText = 'ECHARTS'

    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    canvas.width = canvas.height = 100
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.globalAlpha = 0.08
    ctx.font = '20px Microsoft Yahei'
    ctx.translate(50, 50)
    ctx.rotate(-Math.PI / 4)
    ctx.fillText(waterMarkText, 0, 0)

    const option = {
      backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'repeat'
      },
      tooltip: {},
      title: [
        {
          text: '在线构建',
          subtext: '总计 ' + builderJson.all,
          left: '25%',
          textAlign: 'center'
        },
        {
          text: '各版本下载',
          subtext:
            '总计 ' +
            Object.keys(downloadJson).reduce(function(all, key) {
              return all + downloadJson[key]
            }, 0),
          left: '75%',
          textAlign: 'center'
        },
        {
          text: '主题下载',
          subtext:
            '总计 ' +
            Object.keys(themeJson).reduce(function(all, key) {
              return all + themeJson[key]
            }, 0),
          left: '75%',
          top: '50%',
          textAlign: 'center'
        }
      ],
      grid: [
        {
          top: 50,
          width: '50%',
          bottom: '45%',
          left: 10,
          containLabel: true
        },
        {
          top: '55%',
          width: '50%',
          bottom: 0,
          left: 10,
          containLabel: true
        }
      ],
      xAxis: [
        {
          type: 'value',
          max: builderJson.all,
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          max: builderJson.all,
          gridIndex: 1,
          splitLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: Object.keys(builderJson.charts),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        },
        {
          gridIndex: 1,
          type: 'category',
          data: Object.keys(builderJson.components),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          type: 'bar',
          stack: 'chart',
          z: 3,
          label: {
            normal: {
              position: 'right',
              show: true
            }
          },
          data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.charts[key]
          })
        },
        {
          type: 'bar',
          stack: 'chart',
          silent: true,
          itemStyle: {
            normal: {
              color: '#eee'
            }
          },
          data: Object.keys(builderJson.charts).map(function(key) {
            return builderJson.all - builderJson.charts[key]
          })
        },
        {
          type: 'bar',
          stack: 'component',
          xAxisIndex: 1,
          yAxisIndex: 1,
          z: 3,
          label: {
            normal: {
              position: 'right',
              show: true
            }
          },
          data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.components[key]
          })
        },
        {
          type: 'bar',
          stack: 'component',
          silent: true,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#eee'
            }
          },
          data: Object.keys(builderJson.components).map(function(key) {
            return builderJson.all - builderJson.components[key]
          })
        },
        {
          type: 'pie',
          radius: [0, '30%'],
          center: ['75%', '25%'],
          data: Object.keys(downloadJson).map(function(key) {
            return {
              name: key.replace('.js', ''),
              value: downloadJson[key]
            }
          })
        },
        {
          type: 'pie',
          radius: [0, '30%'],
          center: ['75%', '75%'],
          data: Object.keys(themeJson).map(function(key) {
            return {
              name: key.replace('.js', ''),
              value: themeJson[key]
            }
          })
        }
      ]
    }
    myChart.setOption(option)
    // 1.第二个初始化
    const myChartGauge = this.$echarts.init(document.getElementById('myChartGauge'))
    const option1 = {
      tooltip: {
        formatter: '{a} <br/>{c} {b}'
      },
      toolbox: {
        show: true,
        feature: {
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '速度',
          type: 'gauge',
          z: 3,
          min: 0,
          max: 220,
          splitNumber: 11,
          radius: '50%',
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              width: 10
            }
          },
          axisTick: {
            // 坐标轴小标记
            length: 15, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          splitLine: {
            // 分隔线
            length: 20, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          axisLabel: {
            backgroundColor: 'auto',
            borderRadius: 2,
            color: '#eee',
            padding: 3,
            textShadowBlur: 2,
            textShadowOffsetX: 1,
            textShadowOffsetY: 1,
            textShadowColor: '#222'
          },
          title: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: 'bolder',
            fontSize: 20,
            fontStyle: 'italic'
          },
          detail: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            formatter: function(value) {
              value = (value + '').split('.')
              value.length < 2 && value.push('00')
              return ('00' + value[0]).slice(-2) + '.' + (value[1] + '00').slice(0, 2)
            },
            fontWeight: 'bolder',
            borderRadius: 3,
            backgroundColor: '#444',
            borderColor: '#aaa',
            shadowBlur: 5,
            shadowColor: '#333',
            shadowOffsetX: 0,
            shadowOffsetY: 3,
            borderWidth: 2,
            textBorderColor: '#000',
            textBorderWidth: 2,
            textShadowBlur: 2,
            textShadowColor: '#fff',
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            fontFamily: 'Arial',
            width: 100,
            color: '#eee',
            rich: {}
          },
          data: [{ value: 40, name: 'km/h' }]
        },
        {
          name: '转速',
          type: 'gauge',
          center: ['20%', '55%'], // 默认全局居中
          radius: '35%',
          min: 0,
          max: 7,
          endAngle: 45,
          splitNumber: 7,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              width: 8
            }
          },
          axisTick: {
            // 坐标轴小标记
            length: 12, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          splitLine: {
            // 分隔线
            length: 20, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          pointer: {
            width: 5
          },
          title: {
            offsetCenter: [0, '-30%'] // x, y，单位px
          },
          detail: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: 'bolder'
          },
          data: [{ value: 1.5, name: 'x1000 r/min' }]
        },
        {
          name: '油表',
          type: 'gauge',
          center: ['77%', '50%'], // 默认全局居中
          radius: '25%',
          min: 0,
          max: 2,
          startAngle: 135,
          endAngle: 45,
          splitNumber: 2,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              width: 8
            }
          },
          axisTick: {
            // 坐标轴小标记
            splitNumber: 5,
            length: 10, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          axisLabel: {
            formatter: function(v) {
              switch (v + '') {
                case '0':
                  return 'E'
                case '1':
                  return 'Gas'
                case '2':
                  return 'F'
              }
            }
          },
          splitLine: {
            // 分隔线
            length: 15, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          pointer: {
            width: 2
          },
          title: {
            show: false
          },
          detail: {
            show: false
          },
          data: [{ value: 0.5, name: 'gas' }]
        },
        {
          name: '水表',
          type: 'gauge',
          center: ['77%', '50%'], // 默认全局居中
          radius: '25%',
          min: 0,
          max: 2,
          startAngle: 315,
          endAngle: 225,
          splitNumber: 2,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              width: 8
            }
          },
          axisTick: {
            // 坐标轴小标记
            show: false
          },
          axisLabel: {
            formatter: function(v) {
              switch (v + '') {
                case '0':
                  return 'H'
                case '1':
                  return 'Water'
                case '2':
                  return 'C'
              }
            }
          },
          splitLine: {
            // 分隔线
            length: 15, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          pointer: {
            width: 2
          },
          title: {
            show: false
          },
          detail: {
            show: false
          },
          data: [{ value: 0.5, name: 'gas' }]
        }
      ]
    }

    setInterval(function() {
      option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
      option1.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
      option1.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
      option1.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
      myChartGauge.setOption(option1, true)
    }, 1000)

    // 1.第三个初始化
    const myChartPictorialBar = this.$echarts.init(document.getElementById('myChartPictorialBar'))
    var treeDataURI =
      ''

    var beginYear = 2016
    var endYear = 2050
    var lineCount = 10

    // Basic option:
    const option2 = {
      color: ['#e54035'],
      xAxis: {
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        name: beginYear,
        nameLocation: 'middle',
        nameGap: 40,
        nameTextStyle: {
          color: 'green',
          fontSize: 30,
          fontFamily: 'Arial'
        },
        min: -2800,
        max: 2800
      },
      yAxis: {
        data: makeCategoryData(),
        show: false
      },
      grid: {
        top: 'center',
        height: 280
      },
      series: [
        {
          name: 'all',
          type: 'pictorialBar',
          symbol: 'image://' + treeDataURI,
          symbolSize: [30, 55],
          symbolRepeat: true,
          data: makeSeriesData(beginYear),
          animationEasing: 'elasticOut'
        },
        {
          name: 'all',
          type: 'pictorialBar',
          symbol: 'image://' + treeDataURI,
          symbolSize: [30, 55],
          symbolRepeat: true,
          data: makeSeriesData(beginYear, true),
          animationEasing: 'elasticOut'
        }
      ]
    }

    // Make fake data.
    function makeCategoryData() {
      var categoryData = []
      for (var i = 0; i < lineCount; i++) {
        categoryData.push(i + 'a')
      }
      return categoryData
    }

    function makeSeriesData(year, negative) {
      // make a fake value just for demo.
      var r = (year - beginYear + 1) * 10
      var seriesData = []

      for (var i = 0; i < lineCount; i++) {
        var sign = negative ? -1 * (i % 3 ? 0.9 : 1) : 1 * ((i + 1) % 3 ? 0.9 : 1)
        seriesData.push({
          value: sign * (year <= beginYear + 1 ? (Math.abs(i - lineCount / 2 + 0.5) < lineCount / 5 ? 5 : 0) : (lineCount - Math.abs(i - lineCount / 2 + 0.5)) * r),
          symbolOffset: i % 2 ? ['50%', 0] : null
        })
      }
      return seriesData
    }
    myChartPictorialBar.setOption(option2)
    // Set dynamic data.
    var currentYear = beginYear
    setInterval(function() {
      currentYear++
      if (currentYear > endYear) {
        currentYear = beginYear
      }
      myChartPictorialBar.setOption({
        xAxis: {
          name: currentYear
        },
        series: [
          {
            data: makeSeriesData(currentYear)
          },
          {
            data: makeSeriesData(currentYear, true)
          }
        ]
      })
    }, 800)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
#myChart {
  width: 800px;
  height: 600px;
  margin: auto;
  clear: both;
}

#myChartGauge {
  width: 500px;
  height: 500px;
  margin-left: 170px;
  float: left;
}

#myChartPictorialBar {
  width: 500px;
  height: 500px;
  margin-right: 170px;
  float: right;
}
</style>
